import { DownOutlined, PoweroffOutlined } from '@ant-design/icons'
import type { MenuProps } from 'antd'
import { Dropdown, Space } from 'antd'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { clearToken } from '../../store/login/authSlice.ts'

const items: MenuProps['items'] = [
  {
    key: '2',
    label: <a target="_blank">退出登录</a>,
    icon: <PoweroffOutlined />,
  },
]

export default function MyHeader() {
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const onClick: MenuProps['onClick'] = ({ key }) => {
    if (key === '1') {
      navigate('/personal')
    } else if (key === '2') {
      dispatch(clearToken())
      localStorage.clear()
      navigate('/login')
    }
  }
  return (
    <Dropdown menu={{ items, onClick }}>
      <a onClick={(e) => e.preventDefault()}>
        <Space>
          欢迎您,{localStorage.getItem('username')}
          <DownOutlined />
        </Space>
      </a>
    </Dropdown>
  )
}
